<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品类别</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<div id="duct">
    <el-header>
        <template>
            <el-button type="primary" @click="add">添加</el-button>
            <el-button type="success" @click="update">修改</el-button>
            <el-button type="danger" @click="del">删除</el-button>
        </template>
    </el-header>
    <template>
        <el-table
                :data="tableList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="catId"
                @selection-change="changeSelection"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column
                    prop="catId"
                    label="编号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="catName"
                    label="名称"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="catNumber"
                    label="类别编号">
            </el-table-column>
            <el-table-column
                    prop="catModel"
                    label="规格型号">
            </el-table-column>
            <el-table-column
                    prop="catCommon"
                    label="产品描述">
            </el-table-column>
            <el-table-column
                    prop="catUnits"
                    label="计量单位">
            </el-table-column>
            <el-table-column
                    prop="parentLevel"
                    label="父级编号">
            </el-table-column>
        </el-table>
    </template>
    <!--    添加-->
    <el-dialog
            title="添加"
            :visible.sync="addlog"
            width="30%">
        <el-form>
            <el-form-item label="上级目录:">
                <el-select style="width:60vh" v-model="catlist.parentLevel" placeholder="请选择">
                    <el-option label="主目录" :value="-1"></el-option>
                    <el-option
                            v-for="item in selectlist"
                            :key="item.catId"
                            :label="item.catName"
                            :value="item.catId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类别名称:">
                <el-input v-model="catlist.catName" style="width:60vh"></el-input>
            </el-form-item>
            <el-form-item label="商品编号:">
                <el-input v-model="catlist.catNumber" style="width:60vh"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addlog = false">取 消</el-button>
    <el-button type="primary" @click="insertlist">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="修改"
            :visible.sync="updatelog"
            width="30%">
        <el-form>
            <el-form-item label="上级目录:">
                <el-select style="width:60vh" v-model="catlist.parentLevel" placeholder="请选择">
                    <el-option label="主目录" :value="-1"></el-option>
                    <el-option
                            v-for="item in selectlist"
                            :key="item.catId"
                            :label="item.catName"
                            :value="item.catId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类别名称:">
                <el-input v-model="catlist.catName" style="width:60vh"></el-input>
            </el-form-item>
            <el-form-item label="商品编号:">
                <el-input v-model="catlist.catNumber" style="width:60vh"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="updatelog = false">取 消</el-button>
    <el-button type="primary" @click="edit">确 定</el-button>
  </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#duct',
        data: {
            tableList: [],
            catlist: {
                catName:'',
                parentLevel:'',
                catNumber:'',
                catId:''
            },
            updatelog: false,
            catid: '',
            selectlist: [],
            addlog: false,
            catids: [],
            catdata:'',
            editid: ''
        },
        methods: {
            search() {
                axios.get("/cate/serach")
                    .then(({data}) => {
                        this.tableList = data.data;
                    })
            },
            select() {
                axios.get("/cate/select")
                    .then(({data}) => {
                        this.selectlist = data.data;
                    })
            },
            changeSelection(arr) {
                if (arr.length == 0) {
                    this.catid = 0;
                    this.catids = 0;
                    return;
                }
                this.catid = arr[0].catId;
                this.editid = arr[0].parentLevel;
                this.catids = arr;
                this.catdata=arr[0];
            },
            add() {
                if (this.catids.length != 1) {
                    this.$alert("请选择一项！", "消息提示");
                    return;
                }
                this.addlog = true;
                this.catlist.parentLevel = this.catid;
            },
            insertlist() {
                axios.post("/cate/addlist", this.catlist)
                    .then(({data}) => {
                        this.addlog = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            update() {
                if (this.catids.length != 1) {
                    this.$alert("请选择一项！", "消息提示");
                    return;
                }
                this.updatelog = true;
                console.log(this.catdata)
                this.catlist.parentLevel = this.editid;
                this.catlist.catName = this.catdata.catName;
                this.catlist.catNumber = this.catdata.catNumber;
                this.catlist.catId = this.catid;
            },
            edit() {
                axios.put("/cate/edit", this.catlist)
                    .then(({data}) => {
                        this.updatelog = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            del() {
                axios.delete("/cate/del?id=" + this.catid)
                    .then(({data}) => {
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    })
            },
            // reset() {
            //     this.catlist.parentLevel = '';
            //     this.catlist.catName = '';
            //     this.catlist.catNumber = '';
            // }
        },
        mounted() {
            this.search();
            this.select();
        }
    })
</script>
</body>
</html>